Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

249
Views
threejs, animejs, can't "animate on scroll" imported gltf files. only primitives working

I was experimenting with threejs, animations (animejs) and scroll event. here's a working codepen: https://codepen.io/cristigoia/pen/JjPMQMP

On line 30 i add the cube to the scene:

function addCube () {
    cube = new THREE.Mesh( new THREE.BoxGeometry( 50, 50, 50 ), new THREE.MeshNormalMaterial() );
    cube.position.y = 5
    cube.position.z = -100
    scene.add(cube);
}

on line 37 I init and set the timeline

function initTimeline() {
  timeline = anime.timeline({
    autoplay: false,
    duration: 4500,
    easing: 'easeOutSine'
  });
  timeline.add({
    targets: cube.position,
    x: 100,
    y: 25,
    z: -50,
    duration: 2250,
    update: camera.updateProjectionMatrix()
  })
  timeline.add({
    targets: cube.position,
    x: 0,
    y: 0,
    z: 50,
    duration: 2250,
    update: camera.updateProjectionMatrix()
  })
  var value = new THREE.Color(0xFFFCFC)
  var initial = new THREE.Color(0x161216)
  timeline.add({
    targets: initial,
    r: [initial.r, value.r],
    g: [initial.g, value.g],
    b: [initial.b, value.b],
    duration: 4500,
    update: () => {
      renderer.setClearColor(initial);
    }
  }, 0);
}

Ok so this is perfect, the only problem is that this is working with primitives only (box, cylinder, spherere, whatever) Whenever I try to load a custom GLTF through GLTFLoader the thing get broken and I really can't solve it even if I think I'm near to debug the problem.

I'm trying to load another model like this:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

var loader = new GLTFLoader();

var something;
function addSomething() {

  loader.load("./assets/something.gltf", function(gltf) {
    something = gltf.scene;
    scene.add(something);

  });
}

and everything looks good (if I stay inside this function) but as long as I go outside the function, no matter what I do, errors happen.. (I tried different things and got different errors: from errors like "something is null", "something is not declared", to errors like "no error shown but at the same time nothing happens")

If I try to initialize the timeline and animate the model like I did above with the cube, nothing is working, and I'm stuck here. I tried different thing to solve this, but now I have to "give up" and ask for help, but I'm pretty confident it's an easy task to fix and I'm just braindead right now..

If you can show me how this can be solved I would be very grateful. Thank you

about 4 years ago · Santiago Trujillo
1 answers
Answer question

0

i solved by using this:

const gltf = await loader.loadAsync("./assets/mymodel.gltf")

and then

var mymodel = gltf.scene
scene.add(mymodel)

doing so I'm able to call "mymodel" on the timeline

about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!